<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-form ref="form" v-loading="loading" :model="form" label-width="160px">
        <el-form-item label="开启自动开关机:">
          <el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value=1 :inactive-value=0></el-switch>
        </el-form-item>
        <el-form-item label="设置时间:">
          <el-time-picker v-model="form.on_time" placeholder="开机时间" style="width: 120px"></el-time-picker>
          <el-time-picker v-model="form.off_time" placeholder="关机时间" style="width: 120px"></el-time-picker>
        </el-form-item>
        <el-form-item label="适用时间:">
          <el-checkbox-group v-model="form.week">
            <el-checkbox :label=2>周一</el-checkbox>
            <el-checkbox :label=3>周二</el-checkbox>
            <el-checkbox :label=4>周三</el-checkbox>
            <el-checkbox :label=5>周四</el-checkbox>
            <el-checkbox :label=6>周五</el-checkbox>
            <el-checkbox :label=7>周六</el-checkbox>
            <el-checkbox :label=1>周日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="saveing" @click="save">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {
        enable: 1,
        on_time: '',
        off_time: '',
        week: []
      },
      loading: false,
      saveing: false
    }
  },
  mounted() {
    this.getConfig()
  },
  methods: {
    getConfig() {
      this.loading = true
      this.$http.post('/app_version/autoConfig').then(res => {
        this.loading = false
        if (res.data.code === 0) {
          const  stringToTimeObject = function(timeString) {
            const parts = timeString.split(':')
            const hours = parseInt(parts[0], 10)
            const minutes = parseInt(parts[1], 10)
            const seconds = parseInt(parts[2], 10)
            const date = new Date()
            date.setHours(hours, minutes, seconds, 0)

            return date
          }
          res.data.data.off_time = stringToTimeObject(res.data.data.off_time)
          res.data.data.on_time = stringToTimeObject(res.data.data.on_time)
          this.form = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(e => {
        this.loading = false
        this.$message.error(e.message)
      })
    },
    save() {
      const formatDateTime = function(date) {
        const padZero = function(num) {
          return num < 10 ? '0' + num : num
        }
        const hours = padZero(date.getHours())
        const minutes = padZero(date.getMinutes())
        const seconds = padZero(date.getSeconds())

        return hours + ':' + minutes + ':' + seconds
      }
      const data = {
        id: this.form.id,
        enable: this.form.enable,
        on_time: formatDateTime(this.form.on_time),
        off_time: formatDateTime(this.form.off_time),
        week: this.form.week
      }
      this.$http.post('/app_version/saveAutoConfig', data).then(res => {
        this.saveing = false
        if (res.data.code === 0) {
          this.$message.success('配置成功')
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(e => {
        this.saveing = false
        this.$message.error(e.message)
      })
    }
  }
}
</script>